<template>
  <div
    ref="searchWindow"
    class="sql-search-container"
    style="height: calc(100% - 40px);"
  >
    <div
      class="search-view"
      :style="{ height: `calc(100% - 238px - ${dataTableHeight}px)` }"
    >
      <div class="data-view" :style="{ width: dataTableWidth + 'px' }">
        <div class="left-header">
          我的数据
        </div>
        <a-layout style="height: calc(100% - 38px);">
          <a-layout-sider
            width="180px"
            style="background: #fff; border-right: 1px solid #eee;"
          >
            <data-sider-in-sql
              ref="dataSider2"
              :selected-keys="selectedKeys"
              @set-selected-keys="setSelectedKeys"
            />
          </a-layout-sider>
          <a-layout-content ref="dataview2">
            <div v-if="selectedDatasetId < 0" class="dataview-empty">
              <div>
                <img alt="" src="@/assets/view/dataview-empty.svg" />
                <div>暂无详情</div>
              </div>
            </div>
            <div v-else class="dataview-content">
              <data-view-content
                v-if="selectedDatasetId >= 0"
                :is-in-sql="true"
              />
            </div>
          </a-layout-content>
        </a-layout>
        <div class="data-content"></div>
      </div>
      <div
        class="data-resize-bar"
        @mousedown="resizeDataDrawerWidth($event)"
      ></div>
      <div
        class="edit-view"
        :style="{ width: `calc(100% - ${dataTableWidth}px)` }"
      >
        <div class="left-header">
          语句编写
          <span class="header-btn" @click="setHistoryShow">
            <a-icon-font type="iconqingxi-caozuojilu" />
            <a-tooltip placement="top">
              <template slot="title">
                <span>执行历史</span>
              </template>
              历史
            </a-tooltip>
          </span>
        </div>
        <code-mirror-editor
          class="code-mirror"
          mode="text/x-sql"
          :value="codeValue"
          :height="editorHeight"
          @update:value="updateValue"
        ></code-mirror-editor>
        <div class="footer">
          <a-button class="ok-btn" size="small" @click="queryData"
            >执行</a-button
          >
          <a-button class="cancel-btn" size="small" @click="cancelSql"
            >取消</a-button
          >
        </div>
      </div>
    </div>
    <div class="result-view" :style="{ height: dataTableHeight + 'px' }">
      <div
        class="table-resize-bar"
        @mousedown="resizeDrawerWidth($event)"
      ></div>
      <div class="left-header">
        结果数据
        <span class="header-btn">
          <a-dropdown placement="bottomCenter">
            <div>
              <a-icon-font type="iconxiazaibendi" />
              <a-tooltip placement="top">
                <template slot="title">
                  <span>下载到本地</span>
                </template>
                下载
              </a-tooltip>
            </div>
            <a-menu slot="overlay">
              <a-menu-item :disabled="queryFailed" @click="handleExportToCsv">
                导出为CSV
              </a-menu-item>
              <a-menu-item :disabled="queryFailed" @click="handleExportToXlsx">
                导出为XLSX
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </span>
      </div>

      <div
        v-if="!queryFailed && resultData.length === 0"
        class="resultview-empty"
      >
        <div>
          <img alt="" src="@/assets/view/dataview-empty.svg" />
          <div>暂无查询结果</div>
        </div>
      </div>
      <div v-else class="resultview-content">
        <alert
          v-show="querySuccess"
          message="查询已成功执行!"
          type="success"
          show-icon
          banner
        />
        <alert
          v-show="queryFailed"
          :message="errorMessage"
          type="error"
          show-icon
          banner
        />
        <a-table
          class="table-content"
          :columns="columns"
          :data-source="resultData"
          :scroll="{ x: minLength, y: dataTableHeight - 130 }"
          bordered
          :pagination="{ pageSize: 50 }"
        ></a-table>
      </div>
    </div>
    <div v-show="isHistoryShow" class="history-panel">
      <div class="history-header">
        <a-icon-font type="iconicon-beifen-right" @click="hideHistory" />
        执行历史记录
      </div>
      <div class="history-btns">
        <span class="btn-item" @click="deleteDataById">
          <a-icon-font type="iconicon-beifen5" />
          删除所选
        </span>
        <span class="btn-item" @click="deleteAllHistory">
          <a-icon-font type="iconicon-beifen5" />
          清空全部
        </span>
      </div>
      <div class="history-content">
        <a-checkbox-group v-model="checkedList">
          <div v-for="(list, index) in historyList" :key="index">
            <div class="history-date-line">
              <a-icon-font class="history-icon" type="iconbanbenkuaizhao" />
              <span class="history-date">{{ list.date }}</span>
            </div>
            <div
              v-for="item in list.content"
              :key="item.id"
              class="history-list-item"
              @mouseenter="showRecoverIcon(item)"
              @mouseleave="hideRecoverIcon(item)"
            >
              <a-checkbox :value="item.id"> </a-checkbox>
              <span class="history-time">{{ item.time }}</span>
              <span class="history-label">执行:</span>
              <span class="history-sql">{{ item.rowSql }}</span>
              <popconfirm
                title="将会覆盖当前语句，是否恢复？"
                placement="left"
                ok-text="确定"
                cancel-text="取消"
                style="max-height: 30px;"
                @confirm="recoverHistory(item)"
                @cancel="hidePopconfirm(item)"
              >
                <a-tooltip placement="top">
                  <template slot="title">
                    <span>恢复</span>
                  </template>
                  <a-icon-font
                    v-show="item.visible || item.recover"
                    type="iconqingxi-caozuojilu"
                    @click="showPopconfirm(item)"
                  />
                </a-tooltip>
              </popconfirm>
            </div>
          </div>
        </a-checkbox-group>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
// import {cloneDeep} from 'lodash'
// import moment from 'moment'
import DataStore from '@/store/modules/data'
import DataViewContent from '@/components/data/DataViewContent.vue'
import DataSiderInSql from '@/components/data/DataSiderInSql.vue'
import { Component, Vue } from 'vue-property-decorator'
import CodeMirrorEditor from '@/components/studio/data/popup/CodeMirrorEditor.vue'
import { Alert, message, Popconfirm } from 'ant-design-vue'
import moment from 'moment'

@Component({
  components: {
    DataSiderInSql,
    DataViewContent,
    Alert,
    Popconfirm,
    CodeMirrorEditor,
  },
})
export default class SqlSearchPage extends Vue {
  //  editor height
  private editorHeight: any = '0'
  // 侧边栏选中的项目
  private selectedKeys = ['']
  private isHistoryShow: boolean = false
  // 编辑框
  // public codeMirror: any = {}
  //  editor code value
  public codeValue: string = ''

  // code
  public scriptBody: string = ''

  public submittedSql: string = ''

  // sql查询历史
  public historyList: any[] = []

  // sql查询状态
  private querySuccess: boolean = false
  private queryFailed: boolean = false

  // 查询结果
  private resultData: any[] = []
  private resultHead: any[] = []

  // 错误提示信息
  private errorMessage: string = ''

  private columns: any[] = []

  // 历史操作多选列表
  private checkedList: any[] = []

  private resultHeight: any = document.body.clientHeight * 0.6 - 260
  private minLength = document.body.clientWidth - 285

  // 修改结果栏高度
  private mouseLastPosition = { x: 0, y: 0 }
  private dataTableHeight: number = document.body.clientHeight * 0.6 - 260
  private dataTableMinHeight: number = 40
  private dataTableMaxHeight: any = 1000

  // 修改数据栏宽度
  private dataTableWidth: number = document.body.clientWidth * 0.5
  private dataTableMinWidth: number = 200
  private dataTableMaxWidth: any = 1000
  public $refs!: {
    dataSider2: any
    dataview2: any
    container: any
    searchWindow: any
  }

  public handleResize() {
    this.resultHeight = document.body.clientHeight * 0.6 - 260
    this.minLength = document.body.clientWidth - 4
    this.resetEditorHeight()
  }

  public created() {
    // this.createCodeMirror()
    this.resultHeight = document.body.clientHeight * 0.6 - 260
    this.minLength = document.body.clientWidth - 4
    window.addEventListener('resize', this.handleResize)
    console.log('create')
  }

  private destroyed() {
    window.removeEventListener('resize', this.handleResize)
  }

  public mounted() {
    this.resetEditorHeight()
  }

  public resetEditorHeight() {
    this.editorHeight = (
      (document.querySelector('.edit-view') as HTMLElement).clientHeight - 85
    ).toString()
  }

  //  更新cell代码的值
  public updateValue(value: string) {
    this.scriptBody = value
  }

  public get selectedDatasetId() {
    return DataStore.selectedDatasetId
  }

  /* 设置选中的数据集 */
  public setSelectedKeys(keys: any) {
    this.selectedKeys = keys
    let selectedCategory = ''
    DataStore.datasetCategory.forEach((category) => {
      category.dataset.forEach((dataset) => {
        if (keys[0].includes(dataset.id)) {
          selectedCategory = `category${category.categoryId}`
        }
      })
    })
    const expandedCategoris = [
      ...this.$refs.dataSider2.expandedKeys,
      selectedCategory,
    ]
    if (!this.$refs.dataSider2.expandedKeys.includes(selectedCategory)) {
      this.$set(this.$refs.dataSider2, 'expandedKeys', expandedCategoris)
    }
  }

  /* 执行sql查询 */
  public async queryData() {
    this.querySuccess = false
    this.queryFailed = false
    this.resultData = []
    this.columns = []
    const response = await DataStore.queryDataBySql(this.scriptBody)

    if (response.code === 100) {
      this.querySuccess = true
      const { data, head } = response.result
      setTimeout(() => {
        this.querySuccess = false
        this.resultData = data
        // const count = Object.keys(head).length
        Object.keys(head).forEach((item: any) => {
          this.columns.push({
            title: item,
            dataIndex: item,
            key: item,
          })
        })
        // console.log(this.columns)
        this.submittedSql = this.scriptBody
      }, 100)
    } else {
      this.errorMessage = `查询失败，错误原因：${response.message}`
      this.queryFailed = true
    }
  }

  /* 清除sql查询语句 */
  public clearSql() {
    this.scriptBody = ''
    this.codeValue = ''
  }

  /* 退出sql */
  public cancelSql() {
    this.$router.push('/management/data')
  }

  /* 导出为CSV */
  public async handleExportToCsv() {
    if (this.submittedSql.trim().length === 0) {
      this.$message.warn('请输入 sql 语句后进行下载')
      return
    }
    const response = await DataStore.exportToCsv(this.submittedSql)
    const element = document.createElement('a')
    element.setAttribute(
      'href',
      `data:text/csv;charset=utf-8,${encodeURIComponent(response)}`
    )
    element.setAttribute(
      'download',
      `${moment(new Date()).format('YYYY-MM-DD HH:mm:ss')}.csv`
    )
    element.style.display = 'none'
    element.click()

    console.log(response)
  }

  /* 导出为Xlsx */
  public async handleExportToXlsx() {
    if (this.submittedSql.trim().length === 0) {
      this.$message.warn('请输入 sql 语句后进行下载')
      return
    }
    const response = await DataStore.exportToXlsx(this.submittedSql)
    const blob = new Blob([response], {
      type: 'application/octet-stream;charset=utf-8',
    })

    const element = document.createElement('a')
    element.setAttribute('href', URL.createObjectURL(blob))
    element.setAttribute(
      'download',
      `${moment(new Date()).format('YYYY-MM-DD HH:mm:ss')}.xlsx`
    )
    element.style.display = 'none'
    element.click()
    console.log(response)
  }

  /* 恢复图标和提示框的显示隐藏 */
  public showRecoverIcon(item: any) {
    item.visible = true
  }

  public showPopconfirm(item: any) {
    item.recover = true
  }

  public hidePopconfirm(item: any) {
    item.recover = false
  }

  public hideRecoverIcon(item: any) {
    item.visible = false
  }

  /* 恢复选中操作历史 */
  public async recoverHistory(item: any) {
    this.scriptBody = item.rowSql
    this.submittedSql = item.rowSql
    console.log(this.scriptBody)
    this.codeValue = item.rowSql
    // this.codeMirror.setValue(item.rowSql)
    await this.queryData()
    await this.setHistoryShow()
  }

  /* 删除选中操作记录 */
  public async deleteDataById() {
    if (this.checkedList.length === 0) {
      message.error('未选中操作记录！')
    } else {
      const postData: any[] = []
      this.checkedList.forEach((item: any) => {
        postData.push({
          id: item,
        })
      })
      const response = await DataStore.deleteSqlCategory(postData)
      await this.setHistoryShow()

      console.log(response)
    }
  }

  /* 删除所有查询记录 */
  public async deleteAllHistory() {
    await DataStore.deleteAllSqlCategory({})
    this.setHistoryShow()
  }

  /* 显示查询历史 */
  public async setHistoryShow() {
    this.isHistoryShow = true
    this.historyList = []
    let date = ''
    let preDate = ''
    let list: any[] = []
    await DataStore.querySqlCategory({}).then((response) => {
      response.forEach((element: any, index: number) => {
        preDate = date
        date = moment(element.gmtCreate).format('YYYY-MM-DD')
        if (date === preDate || index === 0) {
          list.push({
            id: element.id,
            time: moment(element.gmtCreate).format('HH:mm'),
            rowSql: element.rowSql,
            visible: false,
            recover: false,
          })
        } else {
          this.historyList.push({
            date: preDate,
            content: list,
          })
          list = []
          list.push({
            id: element.id,
            time: moment(element.gmtCreate).format('HH:mm'),
            rowSql: element.rowSql,
            visible: false,
            recover: false,
          })
        }
      })
      this.historyList.push({
        date: preDate === '' ? date : preDate,
        content: list,
      })
    })

    console.log(this.historyList)
  }

  public hideHistory() {
    this.isHistoryShow = false
  }

  public resizeDataDrawerWidth($event: MouseEvent) {
    $event.stopPropagation()
    this.dataTableMaxWidth =
      (this.$refs.searchWindow as HTMLElement).getBoundingClientRect().width -
      200
    this.mouseLastPosition = { x: $event.screenX, y: $event.screenY }
    document.addEventListener('mouseup', this.dragMouseUpListenerX)
    document.addEventListener('mousemove', this.dragMouseMoveListenerX)
    console.log(this.dataTableHeight)
  }
  public dragMouseMoveListenerX({ screenX, screenY }: MouseEvent) {
    const dx = screenX - this.mouseLastPosition.x
    this.$nextTick(() => {
      if (
        this.dataTableWidth <= this.dataTableMaxWidth &&
        this.dataTableWidth >= this.dataTableMinWidth
      ) {
        let width: number = this.dataTableWidth + dx
        if (width < this.dataTableMinWidth) {
          width = this.dataTableMinWidth
        }
        if (width > this.dataTableMaxWidth) {
          width = this.dataTableMaxWidth
        }
        this.dataTableWidth = width
        this.mouseLastPosition = { x: screenX, y: screenY }
      }
    })
  }
  public resizeDrawerWidth($event: MouseEvent) {
    $event.stopPropagation()
    this.dataTableMaxHeight = (this.$refs
      .searchWindow as HTMLElement).getBoundingClientRect().height
    this.mouseLastPosition = { x: $event.screenX, y: $event.screenY }
    document.addEventListener('mouseup', this.dragMouseUpListenerY)
    document.addEventListener('mousemove', this.dragMouseMoveListenerY)
    console.log(this.dataTableHeight)
  }

  public dragMouseMoveListenerY({ screenX, screenY }: MouseEvent) {
    const dy = screenY - this.mouseLastPosition.y
    this.$nextTick(() => {
      if (
        this.dataTableHeight <= this.dataTableMaxHeight &&
        this.dataTableHeight >= this.dataTableMinHeight
      ) {
        let height: number = this.dataTableHeight - dy
        if (height < this.dataTableMinHeight) {
          height = this.dataTableMinHeight
        }
        if (height > this.dataTableMaxHeight) {
          height = this.dataTableMaxHeight
        }
        this.dataTableHeight = height
        this.mouseLastPosition = { x: screenX, y: screenY }
      }
    })
    this.resetEditorHeight()
  }

  public dragMouseUpListenerX() {
    document.removeEventListener('mousemove', this.dragMouseMoveListenerX)
    document.removeEventListener('mouseup', this.dragMouseUpListenerX)
  }

  private globalMouseUpX() {
    document.removeEventListener('mousemove', this.dragMouseMoveListenerX)
    document.removeEventListener('mouseup', this.dragMouseUpListenerX)
  }
  public dragMouseUpListenerY() {
    document.removeEventListener('mousemove', this.dragMouseMoveListenerY)
    document.removeEventListener('mouseup', this.dragMouseUpListenerY)
  }

  private globalMouseUpY() {
    document.removeEventListener('mousemove', this.dragMouseMoveListenerY)
    document.removeEventListener('mouseup', this.dragMouseUpListenerY)
  }
}
</script>
<style lang="less" scoped>
.sql-search-container {
  max-height: calc(100vh - 218px);
  min-height: calc(100vh - 218px);
  overflow: hidden;
}

.ant-layout {
  background: #fff;
}

.search-view {
  display: flex;
  left: 16px;
  position: absolute;
  right: 16px;
  top: 188px;
  // height: 40vh;
  // min-height: 160px;
  .data-resize-bar {
    background-color: transparent;
    cursor: col-resize;
    height: 100%;
    position: relative;
    right: 0;
    width: 5px;
    z-index: 100;
  }
}

.left-header {
  background: #f9f9fc;
  border-left: 1px solid #e9e9e9;
  border-right: 1px solid #e9e9e9;
  color: #5d637e;
  flex: 0 0 38px;
  font-size: 14px;
  font-weight: 500;
  line-height: 38px;
  padding: 0 16px;
  position: relative;
  z-index: 110;

  .header-btn {
    cursor: pointer;
    position: absolute;
    right: 20px;
  }
}

.data-view {
  border-right: 1px solid #e9e9e9;
  // height: 100%;
  position: relative;
  width: 50%;
}

.ant-layout-content {
  bottom: 0;
  height: 100%;
  left: 220px;
  margin-left: -24px;
  padding-left: 15px;
  // max-height: calc(100vh - 208px);
  // min-height: calc(100vh - 208px);
  // margin: 12px 16px;
  // position: absolute;
  right: 0;
  top: 0;

  &::-webkit-scrollbar {
    height: 6px;
    width: 6px;
  }

  &::-webkit-scrollbar-thumb {
    background: rgba(144, 147, 153, 0.5);
    border-radius: 6px;
  }

  &::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 5px;
  }
}

// 空状态div
.dataview-empty {
  align-items: center;
  background-color: #fff;
  display: flex;
  height: 100%;
  justify-content: center;
  text-align: center;
}

// 数据管理页面内容
.dataview-content {
  align-items: center;
  background-color: #fff;
  height: 100%;
  justify-content: center;
  overflow: auto;
  // display: flex;
  width: 100%;
  // text-align: center;
  &::-webkit-scrollbar {
    height: 6px;
    width: 6px;
  }

  &::-webkit-scrollbar-thumb {
    background: rgba(144, 147, 153, 0.5);
    border-radius: 6px;
  }

  &::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 5px;
  }
}

.edit-view {
  position: relative;
  width: 50%;

  .source-editor {
    // border: 1px solid #888;
    flex: 1 1;
    height: 80%;
    margin: 10px;
    min-height: 0;
    // width: 100%;

    .monaco-editor {
      border: 1px solid #ebebeb;
      border-radius: 4px;
      height: 100%;
      padding-bottom: 0;
      position: relative;
      width: 100%;
    }

    .code {
      border: 1px solid #ddd;
      box-sizing: border-box;
      line-height: 24px;
      min-height: 100%;
      outline: none;
      padding: 5px 10px;
      width: 100%;
    }
  }

  /deep/ .cm-s-default {
    height: 100% !important;
  }

  /deep/ .cm-s-blackboard {
    height: 100% !important;
    width: 100%;
  }

  .footer {
    border-top: 1px solid #ededed;
    bottom: 0;
    height: 46px;
    line-height: 46px;
    position: absolute;
    width: 100%;

    .ok-btn {
      background: #6973ff;
      border-radius: 2px;
      color: #fff;
      float: right;
      height: 24px;
      right: 14px;
      top: 12px;
      width: 49px;
    }

    .cancel-btn {
      border-radius: 2px;
      float: right;
      height: 24px;
      right: 24px;
      top: 12px;
      width: 49px;
    }
  }
}

.result-view {
  // height: calc(60vh - 260px);
  // min-height: 140px;

  bottom: 50px;
  left: 16px;
  position: absolute;
  right: 16px;

  .table-resize-bar {
    background-color: transparent;
    cursor: row-resize;
    height: 5px;
    position: relative;
    top: 0;
    width: 100%;
    z-index: 100;
  }

  .resultview-empty {
    align-items: center;
    background-color: #fff;
    display: flex;
    height: calc(100% - 30px);
    justify-content: center;
    overflow: scroll;
    text-align: center;

    &::-webkit-scrollbar {
      height: 6px;
      width: 6px;
    }

    &::-webkit-scrollbar-thumb {
      background: rgba(144, 147, 153, 0.5);
      border-radius: 6px;
    }

    &::-webkit-scrollbar-track {
      background: transparent;
      border-radius: 5px;
    }
  }

  .resultview-content {
    height: 100%;
    // max-height: 100%;
    overflow: auto;
    padding: 2px;

    &::-webkit-scrollbar {
      height: 6px;
      width: 6px;
    }

    &::-webkit-scrollbar-thumb {
      background: rgba(144, 147, 153, 0.5);
      border-radius: 6px;
    }

    &::-webkit-scrollbar-track {
      background: transparent;
      border-radius: 5px;
    }
  }
}

/deep/.ant-table-body,
/deep/.ant-table-body-inner {
  overflow-y: auto !important;

  &::-webkit-scrollbar {
    height: 6px;
    width: 6px;
  }

  &::-webkit-scrollbar-thumb {
    background: rgba(144, 147, 153, 0.5);
    border-radius: 6px;
  }

  &::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 5px;
  }
}

/deep/.ant-table-fixed-header
  > .ant-table-content
  > .ant-table-scroll
  > .ant-table-body {
  overflow-y: overlay !important;
}

.table-pagination {
  padding: 20px;
  text-align: right;
  width: 100%;
}

.history-panel {
  background: #fff;
  box-shadow: 0 0 10px 0 rgba(88, 98, 230, 0.2);
  height: calc(100vh - 180px);
  position: absolute;
  right: 0;
  top: 180px;
  width: 444px;
  z-index: 1020;

  .history-header {
    border-bottom: 1px solid #ededed;
    color: #373b52;
    font-size: 14px;
    font-weight: 600;
    height: 52px;
    letter-spacing: 1px;
    line-height: 52px;
    padding-left: 20px;
    padding-right: 20px;
    width: 100%;
  }

  .history-btns {
    cursor: pointer;
    height: 50px;
    line-height: 50px;

    .btn-item {
      padding-left: 22px;
      padding-right: 16px;
    }
  }

  .history-content {
    height: calc(100% - 110px);
    overflow: scroll;
    padding-left: 10px;

    .history-date-line {
      margin-left: 20px;
    }

    .history-date {
      color: #373b52;
      font-size: 14px;
      font-weight: 600;
      letter-spacing: 1px;
      line-height: 20px;
      padding: 8px;
    }

    &::-webkit-scrollbar {
      height: 6px;
      width: 6px;
    }

    &::-webkit-scrollbar-thumb {
      background: rgba(144, 147, 153, 0.5);
      border-radius: 6px;
    }

    &::-webkit-scrollbar-track {
      background: transparent;
      border-radius: 5px;
    }
  }
}

.ant-checkbox-group {
  width: 100%;
}

.history-list-item {
  border-left: 1px solid #d8d8d8;
  display: block;
  line-height: 52px;
  margin-left: 30px;
  min-height: 52px;
  padding-left: 20px;
  text-align: left;
  width: 90%;

  &:hover {
    background-color: rgba(103, 113, 252, 0.1);
  }

  .history-time {
    color: rgba(34, 36, 50, 0.3);
    display: inline-block;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 1px;
    line-height: 20px;
    padding: 5px;
  }

  .history-label {
    color: #373b52;
    display: inline-block;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 1px;
    line-height: 20px;
    padding: 5px;
  }

  .history-sql {
    color: #5d637e;
    display: inline-block;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 1px;
    line-height: 17px;
    overflow: hidden;
    padding: 5px;
    vertical-align: middle;
    width: 220px;
  }
}

/deep/ .ant-checkbox-wrapper + .ant-checkbox-wrapper {
  margin-left: 0;
}

/deep/ .ant-alert {
  position: relative;
  text-align: center;
}

/deep/ .ant-alert-icon {
  margin-right: 4px;
  position: unset;
}
</style>
